<template>
	<view>
		<view class="flex flex-column justify-center align-center py-5">
			<text class="text-light-muted font-md mb-2">支付金额</text>
			<price priceSize="font-md">{{orderInfo.totalPrice}}</price>
		</view>
		<view class="px-5">
			<uni-list :border="true">
				<radio-group class="uni-list" @change="radioChange">
					<label class="radio" v-for="item in options">
						<uni-list-item :title="item.title" :note="item.note">
							<template v-slot:header>
								<text style="font-size: 80rpx;" class="iconfont mr-2" :class="item.icon"></text>
							</template>
							<template v-slot:footer>
								<view class="flex flex-1 align-center justify-end">
									<radio color="#FC4353" :value="item.payWay" :checked="item.payWay == currentPayWay"/>
								</view>
							</template>
						</uni-list-item>
					</label>
				</radio-group>
			</uni-list>
			
			<!-- 按钮 -->
			<view @click="goPayResult" class="main-bg-color text-white font-md w-100 py-2 rounded mt-3 text-center" hover-class="main-bg-hover-color">确认支付</view>
		</view>
		
		<pay-password ref="payRef" @cancel="cancelpay" @submit="submitpay"/>
		
		
	</view>
</template>

<script setup>
	import { ref, reactive,nextTick } from "vue";
	import { onLoad, onShow } from "@dcloudio/uni-app";
	import price from "@/components/price.vue"
	import { queryByOrderCode, integralPay } from "@/api/order/order.js"
	import { checkPayPassword } from "@/api/user/index.js"
	import payPassword from "@/components/pay-password.vue"
	
	const payRef = ref()
	
	const orderCode = ref("ZDT20220819151245200001")
	const orderInfo = ref({})
	
	const options = [
		{
			title: "积分支付",
			note: "积分快速支付",
			icon: "icon-jifen text-warning",
			payWay: "jifen",
		},
		{
			title: "微信支付",
			note: "推荐使用微信支付",
			icon: "icon-weixin1 text-success",
			payWay: "weixin",
		},
		{
			title: "支付宝支付",
			note: "支付宝让你生活更精彩",
			icon: "icon-zhifubao1 text-primary",
			payWay: "alipay",
		}
	]
	
	const currentPayWay = ref("jifen")
	
	onLoad((e)=>{
		console.log("订单编号",e.data);
		if(e.data){
			orderCode.value = e.data
		}
		// ZDT20220819151245200001
		queryByOrderInfo()
	})
	
	const queryByOrderInfo = async()=>{
		let res = await queryByOrderCode({orderCode:orderCode.value})
		if(res.data){
			orderInfo.value = res.data
		}
		console.log("订单信息",orderInfo.value);
	}
	
	const radioChange = (e) => {
		currentPayWay.value = e.detail.value
	}
	
	const cancelpay = ()=> {
		console.log('取消支付');
	}
	const submitpay = async (ex) => {
		console.log('支付密码为：'+ex.value);
		if(currentPayWay.value == "jifen"){
			// 调用支付接口
			let payRes = await integralPay({orderCode:orderInfo.value.orderCode,payIntegral:Number(orderInfo.value.totalPrice),payPassword:ex.value})
			console.log("支付结果",payRes);
			if(payRes.code == 200){
				uni.navigateTo({
					url:"/pages/payResult/payResult?data=" + orderCode.value
				})
			}
		}
	}
	
	const goPayResult = async()=>{
		if(currentPayWay.value == "alipay"){
			// 支付宝支付
			uni.toast("暂不支持支付宝支付")
			return
		}else if(currentPayWay.value == "weixin"){
			// 微信支付
			uni.toast("暂不支持微信支付")
			return
		}else if(currentPayWay.value == "jifen"){
			// 积分支付
			// 校验支付密码
			let checkRes = await checkPayPassword()
			console.log(checkRes);
			if(checkRes.code === 200){
				// 支付密码未设置
				console.log(payRef.value);
				nextTick(() => {
			      payRef.value.show()
			    })
			}
		}
	}
</script>

<style>

</style>
